<template>
  <el-dialog :visible.sync="visible"
             :title="!dataForm.id ? `${$t('add')}` : `${$t('update')}`"
             :close-on-click-modal="false"
             :append-to-body="true"
             :before-close="closeDialog"
             class="add-or-updata"
             width="35%"
             :close-on-press-escape="false">
    <el-form :model="dataForm"
             v-loading='dataListLoading'
             ref="dataForm"
             label-position="left"
             style="overflow: hidden;"
             @keyup.enter.native="dataFormSubmitHandle()"
             label-width="100px">
      <el-form-item prop="type"
                    label="类型"
                    :rules="required()"
                    class="leftList">
        <el-select v-model="dataForm.type"
                   placeholder="请选择"
                   @change="changeType"
                   class="width-100">
          <el-option v-for="item in typeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="manufacturers"
                    label="厂家"
                    :rules="required()"
                    class="leftList">
        <el-select v-model="dataForm.manufacturers"
                   placeholder="请选择"
                   @change="changeMane"
                   class="width-100">
          <el-option v-for="item in typeOptions[activeIndex].arr"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="平台名称"
                    prop="platformName"
                    :rules="stringRule(true, 1, 20)">
        <el-input v-model.trim="dataForm.platformName"
                  :placeholder="$t('menu.name')"></el-input>
      </el-form-item>
      <el-form-item label="服务器地址"
                    :rules="stringRule(true, 2, 100)"
                    prop="serverAddress">
        <el-input v-model.trim="dataForm.serverAddress"
                  placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="排序"
                    prop="sort">
        <el-input-number v-model.trim="dataForm.sort"
                         controls-position="right"
                         :max="255"
                         :min="0"
                         class="width-100"
                         :label="$t('menu.sort')"></el-input-number>
      </el-form-item>
      <el-form-item label="参数"
                    :rules="stringRule(true, 1, 300)"
                    prop="platformParameter">
        <el-input v-model="dataForm.platformParameter"
                  type="textarea"
                  resize="none"
                  maxlength="300"
                  :autosize="{ minRows: 5, maxRows: 20 }"
                  show-word-limit
                  placeholder="请输入"></el-input>
      </el-form-item>
      <div style="margin-left: 100px;">参数例子：</div>
      <div style="margin-left: 100px; height: 120px; background-color: #ccc; border-radius: 4px;">{ "appid": "puzzle2000",
        "spk": "A123457s_", "sercet ":"222222222222"}
        appid:
        spk::
        sercet:</div>
    </el-form>
    <template slot="footer">
      <el-button type="primary"
                 :loading="isRequest"
                 @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
      <el-button @click="closeDialog">{{ $t('cancel') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import formValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
import FileUpload from '@/components/file-upload/file-upload'
export default {
  mixins: [mixinViewModule, formValidate],
  components: {
    FileUpload
  },
  data () {
    return {
      visible: false,
      isRequest: false,
      iconList: [],
      iconListVisible: false,
      mixinViewModuleOptions: {
        addURL: '/tb/thirdPlatform/addThird', // 添加或修改的接口
        updateURL: '/tb/thirdPlatform/updateThird', // 添加或修改的接口
        getDataInfoURL: '/tb/thirdPlatform/details?id=' // 获取详情的接口
      },
      typeOptions: [
        {
          label: 'HR',
          value: 0,
          arr: [{
            label: '北森',
            value: 0
          }]
        },
        {
          label: 'OA',
          value: 1,
          arr: [{
            label: '泛微',
            value: 1
          },
          {
            label: '企业微信',
            value: 2
          }]
        },
        {
          label: 'loT',
          value: 2,
          arr: [{
            label: '大华',
            value: 3
          },
          {
            label: '海康',
            value: 4
          }, {
            label: 'ITC网络广播',
            value: 6
          }]
        },
        {
          label: '短信',
          value: 3,
          arr: [{
            label: '阿里云',
            value: 5
          }]
        }
      ],
      activeIndex: 0,
      dataForm: {
        id: '',
        type: '',
        sort: 0,
        manufacturers: '',
        platformName: '',
        serverAddress: '',
        platformParameter: ''
      }
    }
  },
  methods: {
    closeDialog () {
      this.$refs['dataForm'].resetFields()
      this.visible = false
      this.isRequest = false
    },
    init (data) {
      data = data || {}
      this.dataForm.id = data.id
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          // 获取信息
          this.getDataInfo().then(res => {
            this.activeIndex = res.data.type
            if (res.data.manufacturers === 0) {
              this.dataForm.manufacturers = '北森'
            } else if (res.data.manufacturers === 1) {
              this.dataForm.manufacturers = '泛微'
            } else if (res.data.manufacturers === 2) {
              this.dataForm.manufacturers = '企业微信'
            } else if (res.data.manufacturers === 3) {
              this.dataForm.manufacturers = '大华'
            } else if (res.data.manufacturers === 4) {
              this.dataForm.manufacturers = '海康'
            } else if (res.data.manufacturers === 5) {
              this.dataForm.manufacturers = '阿里云'
            }
          })
        }
      })
    },
    changeType (val) {
      if (this.activeIndex !== val) {
        this.manufacturers = ''
      }
      this.activeIndex = val
    },
    changeMane () {
      this.$forceUpdate()
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const url = this.dataForm.id ? this.mixinViewModuleOptions.updateURL : this.mixinViewModuleOptions.addURL
          let params = {}
          if (this.dataForm.manufacturers === '北森') {
            this.dataForm.manufacturers = 0
          } else if (this.dataForm.manufacturers === '泛微') {
            this.dataForm.manufacturers = 1
          } else if (this.dataForm.manufacturers === '企业微信') {
            this.dataForm.manufacturers = 2
          } else if (this.dataForm.manufacturers === '大华') {
            this.dataForm.manufacturers = 3
          } else if (this.dataForm.manufacturers === '海康') {
            this.dataForm.manufacturers = 4
          } else if (this.dataForm.manufacturers === '阿里云') {
            this.dataForm.manufacturers = 5
          }
          params = Object.assign({}, {}, this.dataForm)
          this.addOrUpdateItem({ url, paramData: params }).then(res => {
            this.isRequest = false
            if (res.code !== 0) { return }
            this.$emit('callBack')
            this.closeDialog()
          })
        }
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">
.menu-close {
  position: absolute;
  top: 35%;
  right: 1%;
  cursor: pointer;
}

.mod-sys__menu {
  .menu-list,
  .icon-list {
    position: relative;

    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }

  &-icon-popover {
    width: 458px;
    overflow: hidden;
  }

  &-icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  &-icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;

    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;

      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
}

.el-col .isUser .el-form-item__content {
  margin-left: 70px !important;
}
</style>
